<template>
  <el-container :class="{'home-style': home}">
    <el-header :class="{ 'shadow': route.path !== '/'}" height="80px">
      <ltd-header :page="route.path"></ltd-header>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
    <el-footer class="footer" :class="{'footer-style': home}" height="300px">
      <ltd-footer :page="route.path"></ltd-footer>
    </el-footer>
  </el-container>
</template>
<script lang="ts" setup>
import LtdHeader from './components/LtdHeader.vue'
import LtdFooter from './components/LtdFooter.vue'
import { ref, watch} from "vue";
import { useRoute } from 'vue-router'

const route = useRoute()
const home = ref(true)
let margin = ref('50px')
watch(
  ()=> route.path,
  value => {
    home.value = value === '/'
    margin.value = home.value ? '50px' : '100px'
  },
  {
    immediate: true
  }
)

</script>
<style scoped>
.home-style{
  text-align: center;
  background-image: url('./assets/bg.png');
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
.shadow {
  border-bottom: 4px solid rgba(0, 0, 0, 0.05);
}
.el-main{
  padding: 0;
}
.footer-style{
  background: none !important;
}
.footer{
  background-color: var(--ltd-bg-color-dark);
}
.footer::before{
  height: v-bind(margin);
  display: block;
  vertical-align: middle;
  content: " ";
}

</style>


<style>

</style>
